<!--
* @author wn
* @date 2023/10/12 11:56:36
* @description: 个人信息 展示 与 修改
!-->
<template>
	<view class="bg">
		<!-- 导航栏 -->
		<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
			<navigator
				open-type="navigateBack"
				class="back icon-left"
				hover-class="none"
			></navigator>
			<view class="title">个人信息</view>
		</view>
		<!-- 头像 -->
		<view class="avatar" @tap="onAvatarChange">
			<image class="image" :src="profile?.avatar" mode="aspectFill" />
			<text class="text">点击修改头像</text>
		</view>
	</view>
	<!-- 表单 -->
	<view class="form">
		<!-- 表单内容 -->
		<view class="form-content">
			<view class="form-item">
				<text class="label">账号</text>
				<text class="account">{{ profile?.account }}</text>
			</view>
			<view class="form-item">
				<text class="label">昵称</text>
				<input
					class="input"
					type="text"
					placeholder="请填写昵称"
					v-model="profile.nickname"
				/>
			</view>
			<view class="form-item">
				<text class="label">性别</text>
				<radio-group @change="onGenderChange">
					<label class="radio">
						<radio
							value="男"
							color="#27ba9b"
							:checked="profile?.gender === '男'"
						/>
						男
					</label>
					<label class="radio">
						<radio
							value="女"
							color="#27ba9b"
							:checked="profile?.gender === '女'"
						/>
						女
					</label>
				</radio-group>
			</view>
			<view class="form-item">
				<text class="label">生日</text>
				<picker
					class="picker"
					mode="date"
					start="1900-01-01"
					:end="new Date()"
					:value="profile?.birthday"
					@change="onBirthdayChange"
				>
					<view v-if="profile?.birthday">{{ profile?.birthday }}</view>
					<view class="placeholder" v-else>请选择日期</view>
				</picker>
			</view>
			<view class="form-item">
				<text class="label">城市</text>
				<picker
					class="picker"
					mode="region"
					:value="profile?.fullLocation?.split(' ')"
					@change="onFullLocationChange"
				>
					<view v-if="profile?.fullLocation">{{ profile?.fullLocation }}</view>
					<view class="placeholder" v-else>请选择城市</view>
				</picker>
			</view>
			<view class="form-item">
				<text class="label">职业</text>
				<input
					class="input"
					type="text"
					placeholder="请填写职业"
					v-model="profile.profession"
				/>
			</view>
		</view>
		<!-- 提交按钮 -->
		<button class="form-button" @tap="onSubmit">保 存</button>
	</view>
</template>
<script lang="ts" setup>
import { getMemberProfileApi, putMemberProfileApi } from '@/api/Profile'
import { useMemberStore } from '@/stores'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const { member } = useMemberStore()

// 获取个人信息
const profile = ref({} as Profile)
const getMemberProfile = async () => {
	const data = await getMemberProfileApi()
	profile.value = data
	// 个人中心页面 与该页面数据不同步  这里同步一下
	member!.avatar = data.avatar
	member!.nickname = data.nickname
}

// 页面加载 获取 数据
onLoad(() => getMemberProfile())

// 修改头像
const onAvatarChange = () => {
	/**
	 * 调用拍照 / 图库选择图片
	 * 微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，只能使用 uni.chooseMedia 代替
	 */
	// #ifdef H5 || APP-PLUS
	uni.chooseImage({
		count: 1,
		success: ({ tempFilePaths }) => {
			// 文件路径
			const path = tempFilePaths[0]
			// 上传
			uploadFile(path)
		},
	})
	// #endif

	// #ifdef MP-WEIXIN
	// uni.chooseMedia 仅支持微信小程序端
	uni.chooseMedia({
		count: 1, // 文件个数
		mediaType: ['image'], // 文件类型
		success: ({ tempFiles }) => {
			// 本地路径
			const path = tempFiles[0].tempFilePath
			console.log(path)
			// 上传
			uploadFile(path)
		},
	})
	// #endif
}
// 文件上传 -- 兼容小程序端、H5端、App端
const uploadFile = (path: string) => {
	// uni 文件上传 api -- 拦截器中 已经添加了 uploadFile
	uni.uploadFile({
		url: '/member/profile/avatar',
		filePath: path,
		name: 'file',
		success: ({ data, statusCode }) => {
			if (statusCode === 200) {
				// string 数据 格式化
				const { avatar } = JSON.parse(data).result
				// 上传成功 后  修改 页面 与 store 同步数据
				profile.value.avatar = avatar
				member!.avatar = avatar

				uni.showToast({ icon: 'success', title: '头像更新成功' })
			} else {
				uni.showToast({ icon: 'error', title: '头像更新异常' })
			}
		},
	})
}

// 修改性别
const onGenderChange: UniHelper.RadioGroupOnChange = event => {
	profile.value.gender = event.detail.value as '男' | '女'
}

// 修改生日
const onBirthdayChange: UniHelper.DatePickerOnChange = event => {
	profile.value.birthday = event.detail.value
}

/**
 * 修改城市 -- 数组 转 string 空格 隔开
 * 后台接口需要 code -- 定义为 元组
 */
let fullLocationCode: [string, string, string] = ['', '', '']
const onFullLocationChange: UniHelper.RegionPickerOnChange = event => {
	profile.value.fullLocation = event.detail.value.join(' ')

	fullLocationCode = event.detail.code!
}

// 点击保存提交表单 修改资料
const onSubmit = async () => {
	const { nickname, gender, birthday, profession } = profile.value
	await putMemberProfileApi({
		nickname,
		gender,
		birthday,
		profession,
		provinceCode: fullLocationCode[0],
		cityCode: fullLocationCode[1],
		countyCode: fullLocationCode[2],
	})
	// 提交成功 后  修改 store 同步数据
	member!.nickname = nickname
	uni.showToast({ icon: 'success', title: '数据修改成功' })
	/* 	setTimeout(() => {
		uni.navigateBack()
	}, 400) */
}
</script>
<style lang="scss">
.bg {
	background: url('https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png')
		no-repeat center/cover;
}
// 导航栏
.navbar {
	position: relative;
	color: #fff;
	text-align: center;
	.back {
		position: absolute;
		left: 0;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 40rpx;
	}
	.title {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 500;
	}
}

// 头像
.avatar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 260rpx;
	.image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background-color: #eee;
	}

	.text {
		margin-top: 20rpx;
		line-height: 1;
		font-size: 26rpx;
		color: #fff;
	}
}

// 表单
.form {
	padding: 30rpx 20rpx;
	&-content {
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	&-item {
		display: flex;
		height: 96rpx;
		line-height: 46rpx;
		padding: 25rpx 10rpx;
		background-color: #fff;
		font-size: 28rpx;
		border-bottom: 1rpx solid #ddd;

		&:last-child {
			border: none;
		}

		.label {
			width: 180rpx;
			color: #333;
		}

		.account {
			color: #666;
		}

		.input {
			flex: 1;
			height: 46rpx;
		}

		.radio {
			margin-right: 20rpx;
		}
		.picker {
			flex: 1;
		}
		.placeholder {
			color: #808080;
		}
	}

	&-button {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		margin-top: 30rpx;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: $primary-color;
	}
}
</style>
